<template>
<div class='res' >
  
  <div class="header">
    <div class="title">
      占卜结果
    </div>
    <div class="tips">提示:仅供参考,请相信科学</div>
  </div>

  <p v-for="item in resList" class="detail">
    {{ item }}
  </p>
</div>
</template>

<script setup >
import {getRes} from '@/utils/res'
import {ref} from 'vue'

const resList = ref([])

const init = () => {
  const resStr = getRes()
  const list = resStr.split('\n')
  resList.value = list
}

init()
</script>

<style lang='scss' scoped>
.res {
  padding: 40rpx;
  .header {
    padding-bottom: 80rpx;
    text-align: center;
    .title {
      padding-bottom: 40rpx;
      font-size: 48rpx;
      font-weight: 700;
    }
  }
  .detail {
    margin-bottom: 20rpx;
  }
}
</style>
